<template>
  <section class="content">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="value" placeholder="文件名" @change="list"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="list">查询</el-button>
          <el-button @click="importDataDialog = true">
            <i class="el-icon-upload"></i>上传文件
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24">
      <el-table :data="tableData" stripe highlight-current-row class="table">
        <el-table-column type="index" width="150" padding-left="100"></el-table-column>
        <!-- <el-table-column prop="id" label="id" width="60"></el-table-column> -->
        <el-table-column prop="title" label="文件名称"></el-table-column>
         <el-table-column prop="time" :formatter="dateFormat" label="上传时间"></el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <!-- <el-button  type="text" >查看</el-button> -->
            <el-button type="text">
              <a target="_blank" :href="scope.row.plan" :download="scope.row.title">下载</a>
            </el-button>
            <el-button @click="deleteRow(scope.$index, scope.row)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="show-pager">显示总数</span>
        <el-pagination
          @current-change="handleCurrentChange"
          @pre-click="handlePreClick"
          @next-click="handleNextClick"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="totalRecord"
        ></el-pagination>
      </div>
    </el-col>

    <el-dialog title="上传文件" :visible.sync="importDataDialog" :modal="false">
      <el-form>
        <el-form-item :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            ref="upload"
            drag
            :action="upUrl"
            :before-upload="beforeAvatarUpload"
            :on-exceed="handleExceed"
            :data="pppss"
            :on-success="submitSuccess"
            multiple
            :on-remove="handleRemove"
            :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文件名称：" :label-width="formLabelWidth">
          <el-input v-model="name" placeholder="不填则为上传的文件名称" class></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class>
        <el-button @click="importDataDialog = false">取消</el-button>
        <el-button type="primary" @click="submitUpload">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { O_DIRECTORY } from 'constants';
export default {
  data() {
    return {
      projectId: "",
      formLabelWidth: "150px",
      value: "",
      upUrl: "/api/plan/upload",
      importDataDialog: false,
      totalRecord: 0,
      totalPage: 0,
      currentPage: 1,
      name: "",
      tableData: [],
      pppss: {
        projectId: "",
        title: "",
        uploader:"month"
      }
    };
  },
  mounted() {
    this.projectId = this.$route.query.projectId;
    this.pppss.projectId = this.projectId;
    this.list();
  },
  methods: {
    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    deleteRow(index, rows) {
     this.$confirm("是否要删除?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.tableData.splice(index, 1);
          var id = rows.id;
          let data = {id:id}
          this.projectModel
            .delPlan(data)
            .then(res => {
              
            })
            .catch(err => {
              console.log(err.message);
            });
          
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    list() {
      // 判断value搜索框是否有值
      if (this.value === "") {
        var data = {
          projectId: this.projectId,
          uploader: "month",
          currentPage: this.currentPage,
          pageSize: "10"
        };
      } else {
        var data = {
          projectId: this.projectId,
          title: this.value,
          uploader: "month",
          currentPage: this.currentPage,
          pageSize: "10"
        };
      }
      this.projectModel
        .planIdPage(data)
        .then(res => {
          // console.log(res);
          this.tableData = res.data.list;
          this.totalRecord = res.data.totalRecord;
          this.totalPage = res.data.totalPage;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    handleCurrentChange(event) {
      let data = {
        projectId: this.projectId,
        uploader: "month",
        currentPage: this.currentPage,
        pageSize: "10"
      };
      this.projectModel
        .planIdPage(data)
        .then(res => {
          this.tableData = res.data.list;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    handlePreClick(event) {
      if (this.currentPage != 1) {
        this.currentPage--;
      }
    },
    handleNextClick(event) {
      if (this.currentPage != this.totalPage) {
        this.currentPage++;
      }
    },
     
    handleExceed(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //文件上传前判断操作
    beforeAvatarUpload(file){
      
    },
   
    submitUpload() {
      // if (this.name === "") {
      //   this.$message({
      //     type: "error",
      //     message: "请输入方案名称"
      //   });
      // } else {
        this.pppss.title = this.name;
        this.$refs.upload.submit();
        this.importDataDialog = false;
        
      // }
    },
    submitSuccess(res,file){
      if(res.status == 200){
        this.$message.success('文件上传成功')
        this.handleCurrentChange(event)
        this.name=""
        this.$refs.upload.clearFiles()
      }else{
        this.$message.error(res.msg);
      }
    },
  }
};
</script>
<style scoped>
.content {
  padding-top: 20px;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.table {
  margin-top: 10px;
  margin-left: 10px;
  width: auto;
  margin-right: 10px;
}
</style>
<style>
a {
  color: #409eff;
}
</style>

